🎨 Guía de CSS Básico con ejemplos

Este documento explica los fundamentos de CSS y muestra ejemplos en vivo.

🔑 1. ¿Qué es CSS?

CSS = Cascading Style Sheets = “Hojas de estilo en cascada”.

Sirve para dar apariencia a los elementos HTML: colores, tamaños, posiciones, márgenes, etc.

Se llama “en cascada” porque los estilos se aplican de arriba hacia abajo y el más específico gana.

🔑 2. Sintaxis básica

selector {
  propiedad: valor;
}

h1 {
  color: red;
  font-size: 30px;
}

Ejemplo en vivo: este <h1> sería rojo y grande

🔑 3. Selectores

Por etiqueta:

p { color: blue; }

Ejemplo en vivo: Todos los párrafos serían azules

Por clase:

.destacado { color: orange; }

Ejemplo en vivo: Este párrafo tiene class="destacado"

Por id:

#principal { background: yellow; }

Ejemplo en vivo: Este párrafo tiene id="principal"

Por jerarquía:

header h1 { color: white; }

🔑 4. Propiedades más comunes

🎨 Colores y fondos

color: red;
background-color: black;

Texto rojo

Texto blanco sobre fondo negro

📝 Texto

font-family: Arial, sans-serif;
font-size: 18px;
font-weight: bold;
text-align: center;

Texto estilizado con fuente, tamaño y centrado

📦 Modelo de caja

div {
  border: 2px solid black;
  padding: 10px;
  margin: 20px;
}

📐 Tamaños

width: 300px;
height: 200px;

🔲 Bordes

border: 2px dashed red;
border-radius: 10px;

🔑 5. El flujo de la página

Por defecto:

Block (ocupan todo el ancho y se apilan). Ej: <div>, <h1>, <p>.

Inline (se ponen en línea como texto). Ej: <span>, <a>.

Inline-block (mezcla: se alinean pero permiten ancho/alto).

🔑 6. Cómo funciona “la cascada”

El navegador aplica estilos por defecto. Tus reglas los sobreescriben. Si compiten, gana la más específica: ID > Clase > Etiqueta. Si hay empate, gana la última regla escrita.

Ejemplo

<p id="intro" class="destacado">Hola, soy Spider-Man</p>

p { color: black; }
.destacado { color: blue; }
#intro { color: red; }

Hola, soy Spider-Man (este se ve rojo por la cascada)